<template>
  <div id="order" class="container">
    <h3 class="title"><span />标签管理</h3>

    <el-tabs v-model="activeName" class="tabs" type="card" @tab-click="handleClick">
      <el-tab-pane
        v-for="item in langList"
        :key="item.id"
        :label="item.lang"
        :name="item.lang"
      />
    </el-tabs>
    <div class="content">
      <el-button
        type="primary"
        icon="el-icon-plus"
        size="small"
        style="margin-bottom:15px;margin-left:15px"
        class="add four"
        @click="goAdd"
      >添加标签</el-button>
      <el-table
        :data="tagData"
        border
        stripe
        :header-cell-style="{'text-align':'center',}"
        :cell-style="{'text-align':'center'}"
      >
        <el-table-column prop="id" label="ID" width="80px" />
        <el-table-column prop="title" label="标签名称" />
        <el-table-column prop="tag_hit" label="标签点击数" />
        <el-table-column prop="article_count" label="标签文章数" />
        <el-table-column prop="is_recommend" label="是否推荐">
          <template slot-scope="scope">
            <span v-if="scope.row.is_recommend == 1">推荐</span>
            <span v-else-if="scope.row.is_recommend == 2">不推荐</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="是否推荐">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 1">正常</span>
            <span v-else-if="scope.row.status == 2">隐藏</span>
          </template>
        </el-table-column>
        <el-table-column label="seo标题" prop="seo_title" />
        <el-table-column label="seo关键词" prop="seo_keywords" show-overflow-tooltip />
        <el-table-column label="seo描述" prop="seo_description" show-overflow-tooltip />
        <el-table-column label="操作" fixed="right" width="150px">
          <template slot-scope="scope">
            <el-button class="edit" size="mini" @click="edit(scope.row)">编辑</el-button>
            <el-button class="dele" size="mini" @click="dele(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <BouncedDialog :title="addForm.id?'编辑':'添加'" :dialog-show.sync="dialogShow" :width="50" class="inner">
        <el-form ref="addForm" :model="addForm" :rules="rules" class="addForm" label-width="90px">
          <el-form-item label="标签名:" prop="title">
            <el-input v-model="addForm.title" />
          </el-form-item>
          <el-form-item label="标签文章数:" prop="article_count">
            <el-input v-model="addForm.article_count" />
          </el-form-item>
          <el-form-item label="标签点击数:" prop="tag_hit">
            <el-input v-model="addForm.tag_hit" />
          </el-form-item>
          <el-form-item label="Title:" prop="seo_title">
            <el-input v-model="addForm.seo_title" />
          </el-form-item>
          <el-form-item label="Keyword:" prop="seo_keywords">
            <el-input v-model="addForm.seo_keywords" />
          </el-form-item>
          <el-form-item label="Description:" prop="seo_description">
            <el-input v-model="addForm.seo_description" type="textarea" />
          </el-form-item>
          <el-form-item label="状态:">
            <el-switch
              v-model="addForm.status"
              active-text="正常"
              inactive-text="隐藏"
              :active-value="1"
              :inactive-value="2"
              active-color="#f84311"
              inactive-color="rgba(0,0,0,0.2)"
            />
          </el-form-item>
          <el-form-item label="是否推荐:">
            <el-switch
              v-model="addForm.is_recommend"
              active-text="推荐"
              inactive-text="不推荐"
              :active-value="1"
              :inactive-value="2"
              active-color="#f84311"
              inactive-color="rgba(0,0,0,0.2)"
            />
          </el-form-item>
          <div class="btn">
            <el-button @click="dialogShow = false">取 消</el-button>
            <el-button type="primary" @click="submit()">确 定</el-button>
          </div>
        </el-form>
      </BouncedDialog>
      <el-pagination
        :current-page="page.currentPage"
        :page-sizes="page.pageSizes"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        :hide-on-single-page="page.total<page.size?true:false"
        style="margin-top:20px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

  </div>
</template>
<script>
import tagApi from '@/api/tag.js'
import websetApi from '@/api/websetting'
export default {
  data() {
    return {
      tagData: [],
      langList: [],
      activeName: '',
      dialogShow: false,
      addForm: {
        id: '',
        title: '',
        article_count: '',
        is_recommend: '',
        tag_hit: '',
        status: '',
        seo_keywords: '',
        seo_title: '',
        seo_description: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入标签名', trigger: 'blur' }
        ]
      },
      page: {
        total: 0,
        currentPage: 1,
        size: 10,
        pageSizes: [10, 20, 30, 40]
      } // 分页器
    }
  },
  computed: {
    siteId1() {
      return this.$store.getters.siteId
    }
  },
  watch: {
    siteId1(val, value) {
      this.siteId = val

      this.getLang()
    }
  },
  created() {
    // this.getList()
    this.siteId = this.$store.getters.siteId
    if (this.siteId) {
      this.getLang()
    }
  },

  methods: {
    // 切换tab
    handleClick(val) {
      this.activeName = val.name
      this.getList()
    },
    // 获取站点语言
    getLang() {
      websetApi.langInfo({ site_id: this.siteId }).then(res => {
        this.langList = res.data

        if (res.data.length > 0) {
          this.activeName = res.data[0].lang
        }
        this.getList()
      })
    },
    // 标签列表
    getList() {
      const val = {
        limit: this.page.size,
        page: this.page.currentPage,
        lang: this.activeName,
        website_id: this.siteId
      }
      tagApi.tagList(val).then(res => {
        this.tagData = res.data
        this.page.total = res.count
      })
    },
    // 新增
    goAdd() {
      this.addForm.id = ''
      this.addForm = {
        title: '',
        article_count: '',
        is_recommend: 2,
        tag_hit: '',
        status: 1,
        seo_keywords: '',
        seo_title: '',
        seo_description: '',
        website_id: this.siteId,
        lang: this.activeName
      }

      this.dialogShow = true
    },
    // 编辑
    edit(row) {
      this.addForm = {
        id: row.id,
        title: row.title,
        article_count: row.article_count,
        is_recommend: row.is_recommend,
        tag_hit: row.tag_hit,
        status: row.status,
        seo_keywords: row.seo_keywords,
        seo_title: row.seo_title,
        seo_description: row.seo_description,
        website_id: this.siteId,
        lang: this.activeName
      }
      this.dialogShow = true
    },
    // 保存添加编辑
    submit() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          if (!this.addForm.id) {
            tagApi.tagSave({ ...this.addForm }).then(res => {
              if (res.code == 0) {
                this.dialogShow = false
                this.$message.success(res.msg)
                this.getList()
              } else {
                this.$message.error(res.msg)
              }
            })
          } else {
            tagApi.tagUpdate({ ...this.addForm }).then(res => {
              if (res.code == 0) {
                this.dialogShow = false
                this.$message.success(res.msg)
                this.getList()
              } else {
                this.$message.error(res.msg)
              }
            })
          }
        } else {
          this.$message.error('请填写必要信息')
        }
      })
    },
    // 删除
    dele(row) {
      this.$confirm('此操作将删除该标签, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        tagApi.tagDelete({ id: row.id }).then(res => {
          if (res.code == 0) {
            this.$message.success(res.msg)
            this.getList()
          } else {
            this.$message.error(res.msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 分页规格改变
    handleSizeChange(val) {
      this.page.size = val
      this.page.currentPage = 1
      this.getList()
    },
    // 分页点击
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.getList()
    }
  }
}
</script>
<style lang='scss'>
#order{
 .el-date-editor.el-input.el-date-editor--date{
    width: 180px;
  }
}
  .tabs.el-tabs--card>.el-tabs__header .el-tabs__item{
  background-color: #eee;
  border: none;
  margin-right: 5px;
}
.tabs.el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
  background-color: #fff;
}
.tabs.el-tabs--card>.el-tabs__header .el-tabs__nav{
  border-radius: 0;
  border: none;
}
.tabs.el-tabs--card .el-tabs__header{
  margin: 0;
}
.tabs.el-tabs--card>.el-tabs__header{
  border-bottom: 0;
}
</style>
<style scoped lang='scss'>
.content{
  background-color: #fff;
  padding-top: 20px;
}
</style>
